<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>四款不同的局部图片放大镜效果</title>
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
<script src="../../js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.imageLens.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
		$(function () {
			$("#img_01").imageLens();
			$("#img_02").imageLens({ lensSize: 200 });
			$("#img_03").imageLens({ imageSrc: "images/lanrenzhijia.jpg" });
			$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });
		});	
	</script>
</head>
<body>
<table width="950" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><h3>Demo 1 - Default lens</h3>
      <p> <img id="img_01" src="images/lanrenzhijia.jpg" width="384" height="240" /> </p>
      <pre>$("#img_01").imageLens();</pre>
      <p>&nbsp;</p>
      <h3>Demo 2 - Custom lens size</h3>
      <p> <img id="img_02" src="images/lanrenzhijia.jpg" width="384" height="240" /> </p>
      <pre>$("#img_02").imageLens({ lensSize: 200 });</pre>
    </td>
    <td><p>&nbsp;</p>
      <h3>Demo 3 - Custom image source</h3>
      <p> <img id="img_03" src="images/lanrenzhijia_s.jpg" width="384" height="240" /> </p>
      <pre>$("#img_03").imageLens({ imageSrc: "sample01.jpg" });</pre>
      <p>&nbsp;</p>
      <h3>Demo 4 - Other lens properties</h3>
      <p> <img id="img_04" src="images/lanrenzhijia.jpg" width="384" height="240" /> </p>
      <pre>$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });</pre>
    </td>
  </tr>
</table>
</body>
</html>
